<template>
  <div class="foot">
    <div class="footer">
        <div class="top">
            <a href="#" v-for="(v, index) in arrFoot" :key="index">{{ v }}</a>
        </div>
        <div class="bottom">
            2018 浙B2-20080224
            <a href="#">服务中心</a>
        </div>
        <a href="#" @click="funOpen">打开淘宝</a>
    </div>
  </div>

</template>

<script>
export default {
    data() {
        return {
            // 登录后变用户名
            arrFoot:['登录','退出','手淘App','用户反馈']
    }
},
methods:{
    funOpen(){
        this.$router.push("/open")
    }
}
}
</script>

<style scoped>
.foot{
    height: 2rem;
    background-color: rgb(78, 82, 94);
}
.footer>a{
        width:2.4rem;
        height: .72rem;
        line-height: 0.72rem;
        color: rgb(255, 255, 255);
        display: block;
        position: fixed;
        left: 50%;
        bottom: 1.3rem;
        transform: translate(-50%);
        border: none;
        box-shadow: rgb(18 18 18 / 25%) 0 .008rem .2rem;
        background-color: rgb(255, 80, 0);
        font-size: .28rem;
        border-radius: .36rem;
        text-align: center;
        align-items: center;
        z-index: 1000000;
        font-family: Helvetica, sans-serif;
        text-decoration: none;
        color: #fff;
}
.footer{
    width: 100%;
    height: 1.5rem;
    margin-top: .4rem;
    padding-top:10px;
    background-color: rgb(78, 82, 94);
}
.footer .top{
width: 7.14rem;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;

}
.top a{
    display: inline-block;
        height: .7rem;
        line-height: .7rem;
        color: rgb(195, 198, 202);
        border: .02rem solid rgb(66, 69, 77);
        background-color: rgb(85, 89, 101);
        padding: 0rem .34rem;
        border-radius: .12rem;
        font-size: .28rem;
}
.bottom{
    font-size: .24rem;
        text-align: center;
        color: rgb(195, 198, 202);
        width: 100%;
        margin-top: .4rem;
        height: .4rem;
        line-height: .4rem;
    background: url() no-repeat 1.8rem center/auto .36rem;
}
.bottom a{
     text-align: center;
    color:rgb(195, 198, 202);
    line-height: .4rem;
    margin-bottom: 0.2rem;
}
</style>

